<!-- Section -->
<div class="section @@classes section-lg">
    <div class="container">
        <!-- Title -->
        <div class="row mb-4">
            <div class="col-md-4">
                <span class="h5">Example</span>
            </div>
        </div>
        <!-- End of Title -->
        <div class="row">
            <div class="col-md-10">
                <!-- Nav Wrapper -->
                <div class="nav-wrapper position-relative">
                    <ul class="nav nav-pills nav-fill flex-column flex-sm-row">
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Settings</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Messages</a>
                        </li>
                    </ul>
                </div>
                <!-- End of Nav Wrapper -->
            </div>
        </div>
        <!-- Title -->
        <div class="row mt-5 mb-4">
            <div class="col-md-4">
                <span class="h5">Round Pill</span>
            </div>
        </div>
        <!-- End of Title -->
        <div class="row">
            <div class="col-md-10">
                <!-- Nav Wrapper -->
                <div class="nav-wrapper position-relative">
                    <ul class="nav nav-pills rounded nav-fill flex-column flex-md-row">
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Settings</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Messages</a>
                        </li>
                    </ul>
                </div>
                <!-- End of Nav Wrapper -->
            </div>
        </div>
        <!-- Title -->
        <div class="row mt-5 mb-4">
            <div class="col-md-4">
                <span class="h5">Pills with Icons</span>
            </div>
        </div>
        <!-- End of Title -->
        <div class="row">
            <div class="col-md-10">
                <!-- Nav Wrapper -->
                <div class="nav-wrapper position-relative">
                    <ul class="nav nav-pills nav-fill flex-column flex-md-row">
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#"><span class="fas fa-tachometer-alt mr-2"></span>Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-user-circle mr-2"></span>Profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-sun mr-2"></span>Settings</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-comments mr-2"></span>Messages</a>
                        </li>
                    </ul>
                </div>
                <!-- End of Nav Wrapper -->
            </div>
        </div>
        <div class="row mt-5">
            <div class="col-md-10">
                <!-- Nav Wrapper -->
                <div class="nav-wrapper position-relative">
                    <ul class="nav nav-pills rounded nav-fill flex-column flex-md-row">
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#"><span class="fas fa-tachometer-alt mr-2"></span>Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-user-circle mr-2"></span>Profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-sun mr-2"></span>Settings</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-comments mr-2"></span>Messages</a>
                        </li>
                    </ul>
                </div>
                <!-- End of Nav Wrapper -->
            </div>
        </div>
        <!-- Title -->
        <div class="row mt-5 mb-4">
            <div class="col-md-4">
                <span class="h5">Pills with color variation</span>
            </div>
        </div>
        <!-- End of Title -->
        <div class="row">
            <div class="col-md-12">
                <!-- Nav Wrapper -->
                <div class="nav-wrapper position-relative">
                    <ul class="nav nav-pills nav-fill flex-column flex-md-row">
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0 active" href="#"><span class="icon-success"><span class="fas fa-tachometer-alt mr-2"></span>Dashboard</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="icon-secondary"><span class="far fa-user-circle mr-2"></span>Profile</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="icon-tertiary"><span class="far fa-sun mr-2"></span>Settings</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="icon-info"><span class="far fa-comments mr-2"></span>Messages</span></a>
                        </li>
                    </ul>
                </div>
                <!-- End of  Nav Wrapper -->
            </div>
        </div>
        <!-- Title -->
        <div class="row mt-5 mb-4">
            <div class="col-md-4">
                <span class="h5">Circle Pills</span>
            </div>
        </div>
        <!-- End of Title -->
        <div class="row">
            <div class="col">
                <!-- Nav Wrapper -->
                <div class="nav-wrapper position-relative">
                    <ul class="nav nav-pills nav-pill-circle flex-column flex-md-row">
                        <li class="nav-item">
                            <a class="nav-link active" aria-label="first navigation tab" data-toggle="tab" href="#">
                                <span class="nav-link-icon d-block"><span class="far fa-user"></span></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" aria-label="second navigation tab" data-toggle="tab" href="#">
                                <span class="nav-link-icon d-block"><span class="far fa-lightbulb"></span></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" aria-label="third navigation tab" data-toggle="tab" href="#">
                                <span class="nav-link-icon d-block"><span class="far fa-sun"></span></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" aria-label="fourth navigation tab" data-toggle="tab" href="#">
                                <span class="nav-link-icon d-block"><span class="far fa-paper-plane"></span></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" aria-label="fifth navigation tab" data-toggle="tab" href="#">
                                <span class="nav-link-icon d-block"><span class="far fa-comments mr-2"></span></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- End of Nav Wrapper -->
            </div>
        </div>
    </div>
</div>
<!-- End of Section -->